import React, {useState} from "react";
import {NewItemFormContainer, NewItemButton, NewItemInput} from './styles';
import {useFocus} from './utils/useFocus';

interface NewItemFormProps { 
    onAdd(text:string): void
}


export const NewItemForm = (props:NewItemFormProps) => {

    const [text, setText] = useState("");
    const {onAdd} = props;
    const inputRef = useFocus();

    return (
        <NewItemFormContainer>
            <NewItemInput 
                value={text} 
                onChange={e => setText(e.target.value)} 
                ref={inputRef}
            />
            <NewItemButton onClick={() => onAdd(text)}>创建新的表单</NewItemButton>
        </NewItemFormContainer>
    );
}